<template>
  <div class="relative pt-6">
    <div class="text-sans-serif container">
      <h2 class="h2 mb-5">
        <span>Typography - Font Family Roboto</span>
      </h2>
      <div class="py-3 align-items-center row">
        <div class="col-sm-3">
          <small class="text-uppercase font-weight-bold">Heading 1</small>
        </div>

        <div class="col-sm-9">
          <h1 class="mb-0">H1 Material Kit</h1>
        </div>
      </div>

      <div class="py-3 align-items-center row">
        <div class="col-sm-3">
          <small class="text-uppercase font-weight-bold">Heading 2</small>
        </div>

        <div class="col-sm-9">
          <h2 class="mb-0">H2 Material Kit</h2>
        </div>
      </div>

      <div class="py-3 align-items-center row">
        <div class="col-sm-3">
          <small class="text-uppercase font-weight-bold">Heading 3</small>
        </div>

        <div class="col-sm-9">
          <h3 class="mb-0">H3 Material Kit</h3>
        </div>
      </div>

      <div class="py-3 align-items-center row">
        <div class="col-sm-3">
          <small class="text-uppercase font-weight-bold">Heading 4</small>
        </div>

        <div class="col-sm-9">
          <h4 class="mb-0">H4 Material Kit</h4>
        </div>
      </div>

      <div class="py-3 align-items-center row">
        <div class="col-sm-3">
          <small class="text-uppercase font-weight-bold">Heading 5</small>
        </div>

        <div class="col-sm-9">
          <h5 class="mb-0">H5 Material Kit</h5>
        </div>
      </div>

      <div class="py-3 align-items-center row">
        <div class="col-sm-3">
          <small class="text-uppercase font-weight-bold">Heading 6</small>
        </div>

        <div class="col-sm-9">
          <h6 class="mb-0">H6 Material Kit</h6>
        </div>
      </div>

      <div class="py-3 align-items-center row">
        <div class="col-sm-3">
          <small class="text-uppercase font-weight-bold">Lead text</small>
        </div>

        <div class="col-sm-9">
          <p class="lead mb-0">
            I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I
            understand culture. I am the nucleus. I think that&#39;s a responsibility that I have, to push
            possibilities, to show people, this is the level that things could be at.
          </p>
        </div>
      </div>

      <div class="py-3 align-items-center row">
        <div class="col-sm-3">
          <small class="text-uppercase font-weight-bold">Paragraph</small>
        </div>

        <div class="col-sm-9">
          <p class="mb-0">
            I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I
            understand culture. I am the nucleus. I think that&#39;s a responsibility that I have, to push
            possibilities, to show people, this is the level that things could be at.
          </p>
        </div>
      </div>

      <div class="py-3 align-items-center row">
        <div class="col-sm-3">
          <small class="text-uppercase font-weight-bold">Small</small>
        </div>

        <div class="col-sm-9">
          <p class="text-sm mb-0">
            I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I
            understand culture. I am the nucleus. I think that&#39;s a responsibility that I have, to push
            possibilities, to show people, this is the level that things could be at.
          </p>
        </div>
      </div>

      <div class="py-3 align-items-center row">
        <div class="col-sm-3">
          <small class="text-uppercase font-weight-bold">Tiny</small>
        </div>

        <div class="col-sm-9">
          <p class="text-xs mb-0">
            I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I
            understand culture. I am the nucleus. I think that&#39;s a responsibility that I have, to push
            possibilities, to show people, this is the level that things could be at.
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
